<template>
	<view>
		
		
		<view class="exitheight">
			
		</view>
		
		<navbar :title="toptitle"
		rightText="保存"
		leftText="返回"
		@clickLeft="clickfun"
		@clickRight="save"
		>
		</navbar>
	
		
		<view class="my-add-path" >
			<view class="path-item">
				<view class="">收件人</view>
			<input type="text" value="" placeholder="收件人姓名" v-model="pathobj.name">
			</view>
			<view class="path-item">
				<view class="">手机号</view>
				<input type="text" value="" placeholder="手机号码" v-model="pathobj.tel">
			</view>
			<view class="path-item">
				<view class="">所在地址</view>
				<view class="uni-list-cell">
					<view class="uni-list-cell-left" @tap="showCityPicker">
					{{pathobj.province}}{{pathobj.city}}{{pathobj.district}}
					</view>
					<mpvue-city-picker ref="mpvueCityPicker" :pickerValueDefault="pickerValueDefault" @onConfirm="onConfirm"></mpvue-city-picker>
				</view>
			</view>
			<view class="path-item">
				<view class="">详细地址</view>
				<input type="text" value="" placeholder="地址所在门牌号" v-model="pathobj.address">
			</view>
			
			<view class="path-item">
				<view class="">设为默认地址</view>
				<radio-group name=""  @change="radioChange">
					<label class="radio">
						<radio :checked="pathobj.isDefault==='1'" /><text></text>
					</label>
				</radio-group>
				
			</view>
		</view>
	</view>
</template>

<script>
	import navbar from "@/components/uni/uni-nav-bar/uni-nav-bar.vue"
	import mpvueCityPicker from '../../components/uni/mpvue-citypicker/mpvueCityPicker.vue'
	import $http from '@/common/api/request.js'
	import {mapActions} from 'vuex'
	export default {
		data() {
			return {
				toptitle:"",
				pickerValueDefault:[0,0,1],
				pathobj:{
					id:-1,
					name:"",
					tel:"",
					details:"",
					isDefault:false,
					address:"",
					city:"请选择",
					province:"",
					district:"",
					userId:-1
				},
				i:-1,
				isStatus:false
			};
		},
		components:{
			navbar,mpvueCityPicker
		},
		onLoad(e) {
			if(e.data){
				
				this.toptitle="修改地址"
				// 马上进行赋值
				let result = JSON.parse(e.data);
				this.pathobj = result.item;
				this.i = result.index;
				this.isStatus=true
			}else{
				
			}
		},
		methods:{
			...mapActions(['createPathFn','updatePathFn']),
			showCityPicker(){
				this.$refs.mpvueCityPicker.show()
			},
			onConfirm(e){
				this.pathobj.province=e.label.slice(0,3)
				this.pathobj.district=e.label.slice(8,11)
				this.pathobj.city = e.label.slice(4,7)
			},
			clickfun(){
				uni.navigateBack({
					delta:1
				})
			},
			save(){
				if(this.isStatus){
					this.updatePathFn({
						index:this.i,
						item:this.pathobj
					})
					$http.request({
						url: "/updateAddress",
						method:"POST",
						header:{
							token:true
						},
						data:{
								...this.pathobj
							}
					}).then((res) => {
						uni.showToast({
							title:"信息修改成功",
							mask:true,
							duration:1500
						})
					}).catch(() => {
						uni.showToast({
							title:"修改地址接口失败",
							icon:"none",
							mask:true
						})
					})
					uni.navigateTo({
						url:"/pages/my-path-list/my-path-list"
					})
				}else{
					this.createPathFn({
						index:this.i,
						item:this.pathobj})
					$http.request({
						url: "/AddAddress",
						method:"POST",
						header:{
							token:true
						},
						data:{
								...this.pathobj
							}
					}).then((res) => {
						uni.showToast({
							title:"信息增加成功",
							mask:true,
							duration:1500
						})
					}).catch(() => {
						uni.showToast({
							title:"增加地址接口失败",
							icon:"none",
							mask:true
						})
					})
					uni.navigateTo({
						url:"/pages/my-path-list/my-path-list"
					})
				}
				
			},
			radioChange(){
				this.pathobj.isDefault = true;
			}
		},
		
	}
</script>

<style >
.exitheight{
	height:110rpx;
}
.my-add-path{
	padding-left: 20rpx;
}
.path-item{
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 16rpx 0;
	width:100%;
	border-bottom: 2rpx solid #CCCCCC;
}
.path-item input{
	flex:1;
	text-align: left;
	padding-left: 10rpx;
}
</style>
